export default config => {
	return `
	<template>
    <div
        :class="[b(), className]"
        :style="styleSizeName"
        :id="$attrs.index"
        ref="main"
    ></div>
</template>

<script>
import create from "../../create";
export default create({
    name: '${config.compName}',
    props: {
        option: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        };
    },
    computed: {
        controls() {
            return this.option.controls;
        },
        loop() {
            return this.option.loop;
        },
        autoplay() {
            return this.option.autoplay;
        },
        volume() {
            return this.option.volume;
        },
        defaultPlaybackRate() {
            return this.option.defaultPlaybackRate;
        },
        poster() {
            return this.option.poster;
        }
    },
    watch: {
        data: {
            handler(value) {
                if (this.player) {
                    this.player.src = value.value;
                }
            },
            deep: true
        }
    },
    mounted() {
        this.initPlayer();
    },
    beforeDestroy() {
        this.player.destroy();
        this.player = null;
    },
    methods: {
        initPlayer() {
            this.player = new Player({
                id: this.$attrs.index,
                width: this.width + "px",
                height: this.height + "px",
                // isLive: true,
                url: this.data.value,
                poster: this.poster,
                volume: this.volume,
                controls: this.controls,
                autoplay: this.autoplay,
                loop: this.loop,
                errorTips: '请'+'<span>'+'刷新'+'</span>'+'试试',
                download: false, //设置download控件显示
                playbackRate: [0.5, 1, 2, 3], //传入倍速可选数组
                defaultPlaybackRate: this.defaultPlaybackRate
            });
        }
    }
});
</script>

<style lang="scss">
.xgplayer-skin-default video {
    object-fit: fill;
}
</style>
	`;
};
